<template>
	<view>
		<view class="u-demo-wrap">
			<view class="u-demo-title">
				<u-avatar :src="user.avatar" size="140"></u-avatar>
			</view>
			<view class="u-demo-area u-p-t-30">
				<text class="golden-code">邀请码：{{user.id}}</text><br>
				<view style="font-size: 24rpx;">{{user.nickname}} - {{user.level.level_name}}</view>
			</view>
		</view>

		<view class="wrap u-p-l-30 u-p-r-30">
			<u-sticky>
				<view class="u-tabs-box">
					<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
						:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
				<u-line></u-line>
			</u-sticky>

			<u-row gutter="1" v-for="(payment,index) in payments" class="table-row">
				<u-col span="8" class="u-p-t-20 u-p-b-20"><b>订单号：{{payment.payment_code}}</b></u-col>
				<u-col span="4" class="u-text-right u-p-t-20 u-p-b-20" style="text-align: right;">{{stateText(payment.state)}}
				</u-col>
				<u-col span="2" class="u-padding-20 u-flex">
					<u-avatar :src="payment.avatar"></u-avatar>
				</u-col>
				<u-col span="5">
					<view class="demo-layout u-line-1">{{payment.nickname}}</view>
					<view class="demo-layout u-font-xs u-line-1">消费金额：{{payment.pay_amount}}
					</view>
				</u-col>
				<u-col span="5">
					<view class="demo-layout u-line-1 u-text-right color-green"><template v-if="payment.commission>0">¥+{{payment.commission}}</template><template v-if="payment.commission>0 && payment.referral_points>0"> ⎰ </template><template v-if="payment.referral_points>0">℗+{{payment.referral_points}}</template></view>
					<view class="demo-layout u-font-xs u-line-1 u-text-right">
						{{$u.timeFormat(payment.created, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</u-col>
			</u-row>

		</view>
		<u-loadmore bg-color="rgb(240, 240, 240)" class="u-padding-30" :status="loadStatus" @loadmore="loadMore"
			:load-text="loadText" v-if="payments.length>0"></u-loadmore>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				list: [{
						name: '全部订单',
						state: ''
					},
					{
						name: '待结算',
						state: 'processing'
					},
					{
						name: '已结算',
						state: 'complete'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				payments: [],
				user: {},
				shop: {},
				paging: {
					current_page: 1,
					total_pages: 1,
					page_zie: 100,
					state: ''
				},
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.paging.current_page >= this.paging.total_pages) {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loading';
			this.paging.current_page = ++this.paging.current_page;
			this.loadMore();
		},
		onShow() {
			this.getShop();
			this.getUserInfo();
			this.getPaymentsList();
		},
		methods: {
			stateText(state){
				if(state==='pending'){
					return '待结算'
				}
				if(state==='completed'){
					return '已结算'
				}
				if(state==='rejected'){
					return '订单失败'
				}
				if(state==='rollback'){
					return '被撤回'
				}
				return state;
			},
			openPage(jumpURL) {
				this.$u.route({
					type: 'to',
					params: {},
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getPaymentsList() {
				this.$u.post('/user/my-referred-orders', this.paging).then(res => {
					if (res.page.current_page === 1) {
						this.payments = res.list;
					} else {
						this.payments = this.payments.concat(res.list)
					}
					this.paging.current_page = rea.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				}).catch(e => {
					console.log(e)
				})
			},
			loadMore() {
				console.log('load more')
				if (this.paging.current_page < this.paging.total_pages) {
					this.paging.current_page = this.paging.current_page + 1;
					this.getPaymentsList();
				}
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.current = index;
				this.paging.current_page = 1;
				if (index == 1) {
					this.paging.state = 'pending';
				} else if (index == 2) {
					this.paging.state = 'completed';
				} else {
					this.paging.state = '';
				}
				this.getPaymentsList();
			}
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: flex-end;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		color: #5f6161;
	}

	.golden-code {
		font-size: 32rpx;
	}

	.u-demo-wrap {
		background-color: #ececec;
		padding: 20px 10px;
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.balance {
			font-size: 66rpx;
		}
	}

	.demo-layout {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.demo-layout.u-font-xs {
		padding-top: 0;
		color: #8F8F94;
	}

	.demo-layout.green {
		color: #328a44;
	}

	.demo-layout.red {
		color: red;
	}

	.table-title {
		font-weight: 400;
		border-bottom: 1px solid #DDD;
		background-color: #FFF;
		padding: 18rpx 0;
	}

	.table-row {
		border-bottom: 1px dotted #DDD;
	}

	.color-green {
		color: #11772c;
	}

	.color-red {
		color: red;
	}
</style>
